<template>
    <div style="z-index: 999999;">
        <div class="fieldInput">
            <input v-model="valueA" v-if="type!='textarea'" :type="type" @input="input" ref="input" :readonly="readonly"> 
            <textarea
            v-else
            rows="4"
            @input="input" ref="input" :readonly="readonly"
            v-model="valueA"
            >
            </textarea>
            <i v-if="icon" class="el-icon-arrow-down" v-show="!showClear"></i>
            <i v-if="clear" class="el-icon-close" @click.stop="clearInput" v-show="showClear"></i>
            <slot name="button"></slot>
        </div>
    </div>
</template>

<script>
export default{
    props:{
        label:{
            type:String,
            default:'',
        },
        icon:{
            type:Boolean,
            default:false,
        },
        value:'',
        clear:{
            type:Boolean,
            default:false,
        },
        readonly:{
            type:Boolean,
            default:false,
        },
        type:{
            type:String,
            default:'text',
        }
    },
    model:{
        prop:"value",
        event:'change',
    },
    data() {
        return {
            valueA: this.value,
            showClear:false,
        };
    },
    watch:{
        // value(val){
        //     console.log(val,'555');
        //     this.valueA=val
        // },
        value:{
            deep:true,
            handler(val){
                this.valueA=val
            }
        },

        valueA(val){
            if(val){
                this.showClear=true
            }else{
                this.showClear=false
            }
            this.$emit('change',val)
            this.$emit('update:value',val)
        }
    },
    methods:{
        input(e){
            this.$emit('change',e.target.value)
        },
        //清空input
        clearInput(){
            this.valueA=''
        },
    },
}
</script>

<style lang="scss" scoped>
.labelInput{
    font-size: 16px;
    color: #414A60;
    position: relative;
    margin-bottom: 8px;
    // font-weight: 600;
    .require{
        color: #D0021B;
        font-size: 16px;
        // position: absolute;
    }
}
.fieldInput{
    padding: 10px 11px;
    background-color: #F5F5F5;
    border: 1px #ddd solid;
    border-radius: 6px;
    display: flex;
    align-items: center;
    .el-icon-close{
        z-index: 9;
        // display: none;
    }
    input,textarea{
        border: none;
        background: transparent;
        font-size: 15px ;
        // font-weight: 600;
        flex:1;
        font-family: '微软雅黑';
        // &:focus~.el-icon-arrow-down{
        //     display: none;
        // }
    }
    i{
        font-size: 16px;
    }
}
</style>